<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .yhm {
            width: 100%;
            height: 20px;
        }

        .nr {
            width: 100%;
            height: 50px;
        }

        .fb {
            width: 100px;
            height: 30px;
            background-color: #0d6efd;
            color: white;
            border: 0;
        }

        li {
            list-style: none;
            border: 1px solid #999;
        }

        .right {
            float: right;
        }

        .r1 {
            font-size: 10px;
            background-color: #5bc0de;
            color: white;
            margin-right: 5px;
        }

        .r2 {
            font-size: 10px;
            background-color: #f0ac4e;
            color: white;
            margin-right: 5px;
        }

        .r3 {
            font-size: 10px;
            background-color: #999;
            color: white;
            margin-right: 5px;
            border: 0;
        }
    </style>
</head>

<body>
    <div class="big">
        <p>
        <h1>发表评论</h1>
        </p>
        评论人：<br>
        <input type="text" class="yhm"><br>
        评论内容：<br>
        <input type="text" class="nr"><br>
        <button class="fb">发表评论</button>
        <ul>
            <li>
                <!-- <p><span>内容</span><span class="right"><span class="r1">评论人：123</span><span class="r2">评论时间：2025年2月18日18:40:13</span><button class="r3">删除</button></span></p> -->
            </li>
        </ul>
        <p class="ys"><button class="jian">-</button><span class="gs">1</span><button class="jia">+</button></p>
    </div>
</body>

</html>
<script src="./lib/axios.min.js"></script>
<script>
    var li = document.querySelector('li')
    var big = document.querySelector('.big')
    var ys = document.querySelector('.ys')
    var gs = document.querySelector('.gs')
    function render(a) {
        axios.get(`https://hmajax.itheima.net/api/cmtlist?page=${a}`).then(res => {
            var arr = res.data.data
            var brr = arr.map((ele, index) => {
                return `
                <p data-id=${ele.id}>
                    <span>${ele.content}</span>
                    <span class="right">
                    <span class="r1">评论人：${ele.username}</span><span class="r2">评论时间：${((ele.time).replace('T', ' ')).replace('.000Z', '')}</span>
                    <button class="r3">删除</button></span>
                </p>
                `
            }).join('')
            li.innerHTML = brr
        })

    }
    render(1)
    li.addEventListener('click', function (e) {
        var id = e.target.parentNode.parentNode.dataset.id
        if (e.target.className == 'r3') {
            axios.get(`https://hmajax.itheima.net/api/delcmt?id=${id}`).then(res => {
                render(1)
            })
        }
    })
    big.addEventListener('click', function (e) {
        if (e.target.className == 'fb') {
            var xm = document.querySelector('.yhm')
            var nr = document.querySelector('.nr')
            var data1 = JSON.stringify({
                "username": xm.value,
                "content": nr.value
            });

            var config = {
                method: 'post',
                url: 'https://hmajax.itheima.net/api/addcmt',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: data1
            };
            axios(config)
                .then(function (response) {
                    console.log(JSON.stringify(response.data));
                    xm.value = ''
                    nr.value = ''
                    render(1)
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    })
    ys.addEventListener('click',function(e){
        if(e.target.className=='jia'){
            gs.innerHTML++
            render(gs.innerHTML)
        }
        if(e.target.className=='jian'){
            if(gs.innerHTML==1){
                gs.innerHTML=1
            }else{
                gs.innerHTML--
                render(gs.innerHTML)
            }
        }
    })
</script>